<template>
    <div class="my-top">
        <ul>
            <li>
                <img src="@/assets/img/close.png" alt />
            </li>
            <li>
                <img src="@/assets/img/logo.png" alt />
            </li>
            <li>打开京东App，购物更轻松</li>
            <li>立刻打开</li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "MyTop",
    props: {

    },
    computed:{

    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.my-top {
    padding: 0;
    margin: 0;
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
        li {
            height: 45px;
            float: left;
            line-height: 45px;
            background-color: #333333;
            text-align: center;
            color: #fff;
            &:nth-child(1) {
                width: 8%;
                img {
                    width: 10px;
                }
            }
            &:nth-child(2) {
                width: 10%;
                img {
                    width: 30px;
                    vertical-align: middle;
                }
            }
            &:nth-child(3) {
                width: 57%;
            }
            &:nth-child(4) {
                width: 25%;
                background-color: #ed462f;
            }
        }
        &::after {
            content: "";
            height: 0;
            width: 0;
            display: block;
            visibility: hidden;
            clear: both;
        }
    }
}
</style>
